<%
# Copyright (C) 2012 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
%>

<%
  css_bundle :otp_login
  js_bundle :otp_login
  @headers = false
  @body_classes << "full-width modal body--login-confirmation"
  content_for :page_title, t(:page_title, "Multi-factor Authentication")
%>

<% content_for :meta_tags do %>
  <meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=yes,width=device-width">
<% end %>

<div id="modal-box" class="ic-Login-confirmation">
  <header class="ic-Login-confirmation__header">
    <%= image_tag("login/canvas-logo@2x.png", class:"ic-Login-confirmation__logo", alt:"Canvas by Instructure") %>
  </header>
  <div class="ic-Login-confirmation__content">
  <h2 class="ic-Login-confirmation__headline"><%= t 'titles.mfa', "Multi-factor Authentication" %></h2>
  <% if configuring? %>
    <div>
      <% if @current_user.mfa_settings(pseudonym_hint: @current_pseudonym) == :required %>
        <p>{{#t}}You are required to set up multi-factor authentication.{{/t}}</p>
      <% end %>
      <p><%=  mt('details.mfa_enrollment', <<-BODY, :secret_key => session[:pending_otp_secret_key], :iphone_url => 'http://itunes.apple.com/us/app/google-authenticator/id388497605', :android_url => 'https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2')
Multi-factor authentication increases security by requiring that you have something in your physical possession,
in addition to knowing your password, in order to log in to Canvas. This can be a device that can generate
verification codes, or a phone that can receive text messages. The Google Authenticator app for [iPhone](%{iphone_url}) or
[Android](%{android_url}) can be configured by scanning the QR Code below. Other tokens can be configured by entering the
secret key **%{secret_key}**. Once you have configured multi-factor authentication, it is recommended that you go to your
profile page and print out a set of back-up codes, in case your normal multi-factor device is unavailable.
          BODY
      %></p>
      <div class="content-box">
        <div class="grid-row">
          <div class="col-xs-12 col-md-8">
            <% ccs = @current_user.communication_channels.sms.unretired.map { |cc| [ cc.path, cc.id ] } %>
            <% unless ccs.empty? %>
              <% ccs << [ "<< #{t('select.new_number', "a new phone")} >>", '{{id}}' ] %>
              <%= form_for :otp_login, :url => send_otp_via_sms_path, :html => {:id => 'select_phone_form'} do |f| %>
                <%= t('details.send_to_sms', "Send text messages to %{phone_number}", :phone_number => f.select('otp_communication_channel_id', ccs, :selected => @cc.try(:id))) %>
                <button type="submit" class="Button Button--primary">{{#t}}Send{{/t}}</button>
              <% end %>
            <% end %>
            <%= form_for :otp_login, :url => send_otp_via_sms_path, :html => { :id => 'new_phone_form', :style => (hidden(false) unless ccs.empty?), :class => 'ic-Form-group' } do |f| %>
              <div class="ic-Form-control">
                <%= f.blabel :phone_number, :en => 'Phone Number', :class => 'ic-Label' %>
                <div class="controls"><%= f.text_field :phone_number, :class => 'ic-Input' %></div>
              </div>
              <div class="ic-Form-control">
                <%= f.blabel :carrier, :en => 'Carrier', :class => 'ic-Label' %>
                <%= f.select :carrier, CommunicationChannel.sms_carriers_by_name, {}, { :class => 'ic-Input' } %>
              </div>
              <div>
                <button type="submit" class="Button Button--primary">{{#t}}Send{{/t}}</button>
                <% unless ccs.empty? %>
                  <a href="#" class="Button Button--link" id="back_to_choose_number_link">{{#t}}Choose an existing phone{{/t}}</a>
                <% end %>
              </div>
            <% end %>
          </div>
          <div class="col-xs-12 col-md-4">
            <% provisioning_uri = ROTP::TOTP.new(session[:pending_otp_secret_key]).provisioning_uri("Canvas") %>
            <% qr_code = Barby::QrCode.new(provisioning_uri) %>
            <div class="otp-qr-code">
              <img src="data:image/png;base64,<%= Base64.encode64(qr_code.to_png(:xdim => 4)).strip %>">
            </div>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <p></p>
  <% if @cc %>
    <div><p>{{#t}}A verification code has been sent to your phone. Please enter it here.{{/t}}</p></div>
  <% else %>
    <div><p>{{#t}}Please enter the verification code shown by your token.{{/t}}</p></div>
  <% end %>
  <%= form_for :otp_login, :url => otp_login_path, :html => {:id => "login_form", :class => "ic-Form-group"} do |f| %>
    <div class="ic-Form-control">
      <div class="ic-Input-group">
        <%= f.blabel :verification_code, :en => "Verification Code", :class => 'ic-Label' %>
        <%= f.text_field :verification_code, :class => "ic-Input", :autocomplete => 'off' %>
        <button type="submit" class="Button Button--primary">{{#t}}Verify{{/t}}</button>
      </div>
    </div>
    <div>
      <%= f.check_box :remember_me %> <%= f.label :remember_me, :en => "Remember this computer" %>
    </div>
  <% end %>
  </div>
</div>
